<template>
    <view class="bottom">
        <Header></Header>
        <view class="home">
            <u-icon style="margin-left: 50rpx;margin-right: 20rpx"
                    name="home-fill" color="#00eaff" @click="home"></u-icon>
            <text style="color: #00eaff;padding-right: 30rpx">福利中心</text>
            <u-icon name="question-circle-fill" color="#00eaff" @click="toHelp"></u-icon>
        </view>
        <view>
            <u-popup ref="help" mode="center" width="95%" closeable :width="windowsWidth+'px'">
                <view class="popup">出淤泥而不染，濯清涟而不妖</view>
            </u-popup>
        </view>
        <view class="button-group">
            <view v-for="(button, index) in buttons" :key="index" class="button-item"
                  :class="{ 'active': selectedSaleAnalysis === button.id }" @click="handleButtonClick(button)">
                {{ button.name }}
            </view>
        </view>
        <view v-if="selectedSaleAnalysis===1">
            <box-item :box-list="boxList" :free="true"></box-item>
        </view>
        <view v-if="selectedSaleAnalysis===2">
            <view class="title">
                <view class="title-name">
                    <u-row gutter="16">
                        <u-col span="3" text-align="center">
                            <view>推广人数</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>被邀用户充值</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>分佣比例</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>收益</view>
                        </u-col>
                    </u-row>
                </view>
                <view class="title-number">
                    <u-row gutter="16">
                        <u-col span="3" text-align="center">
                            <view>{{ shareRebateList.share_num }}</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>{{ shareRebateList.share_user_recharge }}</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>{{ shareRebateList.retail_rate }}</view>
                        </u-col>
                        <u-col span="3" text-align="center">
                            <view>{{ shareRebateList.retail_sum }}</view>
                        </u-col>
                    </u-row>
                </view>
            </view>
            <view style="font-size: 36rpx;text-align: center;padding-top: 20rpx;color: #e4c65c">我的推广</view>
            <view class="user" v-if="shareRebateList.share_list.length > 0">
                <view style="padding-top: 20rpx">
                    <u-row gutter="16">
                        <u-col span="3" text-align="center">
                            <view>头像</view>
                        </u-col>
                        <u-col span="4" text-align="center">
                            <view>昵称</view>
                        </u-col>
                        <!--                        <u-col span="3" text-align="center">-->
                        <!--                            <view>充值钻石总数</view>-->
                        <!--                        </u-col>-->
                        <u-col span="5" text-align="center">
                            <view>分佣所得钻石</view>
                        </u-col>
                    </u-row>
                </view>
                <view v-for="(item, index) in shareRebateList.share_list" :key="index" class="user-list">
                    <view class="user-list-item">
                        <u-row gutter="16">
                            <u-col span="3" text-align="center">
                                <u-avatar :src="item.avatar" size="60" mode="circle"></u-avatar>
                            </u-col>
                            <u-col span="4" text-align="center">
                                <view>{{ item.nickname }}</view>
                            </u-col>
                            <!--                            <u-col span="3" text-align="center">-->
                            <!--                                <view>{{ item.coin_amount }}</view>-->
                            <!--                            </u-col>-->
                            <u-col span="5" text-align="center">
                                <view>{{ item.coin }}</view>
                            </u-col>
                        </u-row>
                    </view>
                </view>
            </view>
            <view v-else>
                <u-divider style="padding: 30rpx" bg-color="#0f0e2d">暂无数据</u-divider>
            </view>
        </view>
        <view v-if="selectedSaleAnalysis===3">
            <ranking></ranking>
        </view>
        <!-- 回到顶部 -->
        <u-back-top :scroll-top="scrollTop"></u-back-top>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import CustomTabbar from "@/components/tabbar/tabbar.vue";
import Header from "@/components/header/header.vue";
import BoxItem from "@/components/boxList/boxList.vue";
import Ranking from "@/components/ranking/ranking.vue";

export default {
    components: {
        BoxItem,
        Ranking,
        Header,
        CustomTabbar
    },
    data() {
        return {
            windowsWidth: 0,
            // 顶部按钮
            selectedSaleAnalysis: 1,
            // 分类 button
            buttons: [
                {
                    id: 1,
                    name: '免费箱子'
                },
                {
                    id: 2,
                    name: '分享返佣'
                },
                {
                    id: 3,
                    name: '排行榜'
                }
            ],
            // 商品列表
            boxList: [],
            // 分享返佣列表
            shareRebateList: '',
            // 滚动距离
            scrollTop: 0,
        };
    },
    onShow() {
        this.getFreeBox()
        this.getRetailList();
    },
    // 滚动监听
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
    },
    methods: {
        // 返回
        home() {
            this.$u.route('pages/index/index')
        },
        // 跳转帮助
        toHelp() {
            this.$refs.help.open()
        },
        // 切换按钮
        handleButtonClick(button) {
            this.selectedSaleAnalysis = button.id; //切换选中的button
        },
        // 获取免费箱子
        getFreeBox() {
            this.$u.api.getBoxList({
                is_free_box: 1
            }).then(res => {
                this.boxList = res.data.data;
            })
        },
        // 获取分享返佣
        getRetailList() {
            this.$u.api.getRetailList().then(res => {
                this.shareRebateList = res.data;
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.home {
    line-height: 100rpx;
    //margin-left: 30rpx;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.button-group {
    display: flex;
    margin: 20rpx 30rpx;

    .button-item {
        flex: 1;
        text-align: center;
        padding: 10px;
        border: 1px solid #708fff;
        border-left: none;
        cursor: pointer;
    }
}

.button-group .button-item:first-child {
    border-radius: 20px 0 0 20px;
    border-left: 1px solid #20264d;
}

.button-group .button-item:last-child {
    border-radius: 0 20px 20px 0;
}

.button-group .button-item:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.active {
    background-color: #708fff;
    color: #fff;
    border: none;
    border-top: 1px solid #20264d;
    border-bottom: 1px solid #20264d;
}

.retail-rate {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    border-radius: 30rpx;
    overflow: hidden;

    .title-name {
        background-color: #4682B4;
        color: #c6c4d8;
        height: 100rpx;
        line-height: 100rpx;
    }

    .title-number {
        background-color: #4169E1;
        height: 100rpx;
        line-height: 100rpx;
    }
}

.user {
    padding-top: 30rpx;

    .user-list {
        padding-top: 20rpx;

        .user-list-item {
            padding-top: 10rpx;
        }
    }
}

//.shareRebate {
//    display: flex;
//    flex-direction: column;
//    align-items: center
//
//}

</style>
